<template>
    <div class="about-box" ref="aboutBox">
        <div>
            <!-- 用户名称及头像展示 -->
            <div class="about-user">
                <div class="about-user-img" style="background-image:url('./images/user.jpg')"></div>
                <div class="about-user-name">
                    <p>用户名称</p>
                    <div>
                        <span>我的收货地址</span>
                        <span>></span>
                    </div>
                </div>
            </div>
            <!-- 我的订单展示 -->
            <div class="about-order">
                <div class="about-order-inner">
                    <div class="about-order-inner-img"></div>
                    <div class="about-order-inner-indec">
                        <span>我的订单</span>
                        <span>></span>
                    </div>
                </div>
            </div>
            <!-- 我的购物车展示 -->
            <div class="about-cart">
                <div class="about-cart-img"></div>
                <div class="about-cart-indec">
                    <span>我的购物车</span>
                    <span>></span>
                </div>
            </div>
            <!-- 我的拼团展示 -->
            <div class="about-collage">
                <div class="about-collage-img"></div>
                <div class="about-collage-indec">
                    <span>我的拼团</span>
                    <span>></span>
                </div>
            </div>
            <!-- 我的钱包展示 -->
            <div class="about-wallet">
                <div class="about-wallet-img"></div>
                <div class="about-wallet-indec">
                    <span>我的钱包</span>
                    <span>快速提现 ></span>
                </div>
            </div>
            <!-- 我的优惠券展示-->
            <div class="about-favourable">
                <div class="about-favourable-img"></div>
                <div class="about-favourable-indec">
                    <span>我的优惠券</span>
                    <span>></span>
                </div>
            </div>
            <!-- 我收藏的商品展示 -->
            <div class="about-collect">
                <div class="about-collect-img"></div>
                <div class="about-collect-indec">
                    <span>我收藏的商品</span>
                    <span>></span>
                </div>
            </div>
            <!-- 我收藏的店铺展示 -->
            <div class="about-shop">
                <div class="about-shop-img"></div>
                <div class="about-shop-indec">
                    <span>我收藏的店铺</span>
                    <span>></span>
                </div>
            </div>
            <hr style="height:0.3rem;background-color:rgba(0,0,0,0.1);border:none;">
            <!-- 消息通知展示 -->
            <div class="about-notice">
                <div class="about-notice-img"></div>
                <div class="about-notice-indec">
                    <span>消息通知</span>
                    <span>></span>
                </div>
            </div>
            <!-- 客服展示 -->
            <div class="about-service">
                <div class="about-service-img"></div>
                <div class="about-service-indec">
                    <span>客服</span>
                    <span>></span>
                </div>
            </div>
            <!-- 意见反馈展示 -->
            <div class="about-feedback">
                <div class="about-feedback-img"></div>
                <div class="about-feedback-indec">
                    <span>意见反馈</span>
                    <span>></span>
                </div>
            </div>
            <div class="about-exit">
                <div>
                    <input type="button" value="退出登录">
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import BScroll from "better-scroll";
export default {
    methods:{
        initScroll(){
            var scroll=new BScroll(this.$refs.aboutBox);
        }
    },
    mounted(){
        this.initScroll();
    }
}
</script>
<style lang="less" scoped>
//关于我页面的样式
.about-box {
    position: absolute;
    top: 0rem;
    bottom: 1rem;
    left: 0rem;
    right: 0rem;
    // overflow-y: auto;
}
//用户名称的样式
.about-user {
    width: 100%;
    height: 2rem;
    box-sizing: border-box;
    padding: 0.3rem;
    display: flex;
    align-items: center;
    > .about-user-img {
        width: 1rem;
        height: 1rem;
        background-size: cover;
        border-radius: 50%;
    }
    > .about-user-name {
        padding-left: 0.4rem;
        > p {
            font-weight: bold;
            font-size: 0.4rem;
        }
        > div > span {
            font-size: 0.25rem;
        }
        > div > span:last-child {
            padding-left: 0.6rem;
            color: @gray;
        }
    }
}
//我的订单的样式
.about-order {
    width: 100%;
    height: 1.5rem;
    background-color: rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    > .about-order-inner {
        background-color: @white;
        width: 100%;
        height: 1rem;
        display: flex;
        align-items: center;
        padding: 0rem 0.4rem;
        > .about-order-inner-img {
            flex: 1;
            background-image: url("../../public/images/order.png");
            width: 0.6rem;
            height: 0.6rem;
            background-size: 100% 100%;
        }
        > .about-order-inner-indec {
            flex: 8;
            padding-left: 0.3rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            > span:first-child {
                font-weight: bold;
            }
            > span:last-child {
                font-size: 0.25rem;
            }
        }
    }
}
//我的购物车及其他的样式
.about-cart,
.about-collage,
.about-wallet,
.about-favourable,
.about-collect,
.about-shop,
.about-notice,
.about-service,
.about-feedback {
    background-color: @white;
    width: 100%;
    height: 1rem;
    display: flex;
    align-items: center;
    padding: 0rem 0.4rem;
    box-sizing: border-box;
    border-bottom: 1px solid @gray;
    > .about-cart-img {
        flex: 1;
        background-image: url("../../public/images/shoppingCart.png");
        width: 0.6rem;
        height: 0.6rem;
        // line-height:0.8rem;
        background-size: 100% 100%;
    }
    > .about-collage-img {
        flex: 1;
        background-image: url("../../public/images/pieceTogether.png");
        width: 0.6rem;
        height: 0.6rem;
        background-size: 100% 100%;
    }
    > .about-wallet-img {
        flex: 1;
        background-image: url("../../public/images/wallet.png");
        width: 0.6rem;
        height: 0.6rem;
        background-size: 100% 100%;
    }
    > .about-favourable-img {
        flex: 1;
        background-image: url("../../public/images/discountCoupon.png");
        width: 0.6rem;
        height: 0.6rem;
        background-size: 100% 100%;
    }
    > .about-collect-img {
        flex: 1;
        background-image: url("../../public/images/collect.png");
        width: 0.6rem;
        height: 0.6rem;
        background-size: 100% 100%;
    }
    > .about-shop-img {
        flex: 1;
        background-image: url("../../public/images/shop.png");
        width: 0.6rem;
        height: 0.6rem;
        background-size: 100% 100%;
    }
    > .about-notice-img {
        flex: 1;
        background-image: url("../../public/images/message.png");
        width: 0.6rem;
        height: 0.6rem;
        background-size: 100% 100%;
    }
    > .about-service-img {
        flex: 1;
        background-image: url("../../public/images/service.png");
        width: 0.6rem;
        height: 0.6rem;
        background-size: 100% 100%;
    }
    > .about-feedback-img {
        flex: 1;
        background-image: url("../../public/images/feedback.png");
        width: 0.6rem;
        height: 0.6rem;
        background-size: 100% 100%;
    }
    > .about-cart-indec,
    .about-collage-indec,
    .about-wallet-indec,
    .about-favourable-indec,
    .about-collect-indec,
    .about-shop-indec,
    .about-notice-indec,
    .about-service-indec,
    .about-feedback-indec {
        flex: 8;
        // line-height:0.8rem;
        padding-left: 0.3rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        > span:first-child {
            font-weight: bold;
        }
        > span:last-child {
            font-size: 0.25rem;
        }
    }
}
.about-shop,
.about-feedback {
    border: none;
}
//退出登录按钮样式
.about-exit {
    width: 100%;
    height: 1.5rem;
    display: flex;
    align-items: center;
    padding: 0rem 0.5rem;
    box-sizing: border-box;
    > div {
        width: 100%;
        height: 0.8rem;
        > input {
            width: 100%;
            height: 100%;
            background-color: @pink;
            border: none;
            color: @white;
            font-size: 0.4rem;
        }
    }
}
</style>